<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </meta>
  <title>登录页面</title>
  <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
  <style>
    body {
      margin: 0;
      padding: 0;
      background-image: linear-gradient(90deg, rgb(200, 214, 240) 20%, rgb(68, 106, 175) 80%);
    }

    .loginDiv {
      width: 400px;
      margin: 0 auto;
      margin-top: 10%;
    }

    .titleDiv {
      width: 400px;
      height: 100px;
      text-align: center;
      z-index: 999;
    }

    .titleDiv .title {
      color: #fff;
      font-size: 28px;
      font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
      letter-spacing: 10px;
    }

    .layui-elem-field legend {
      margin-left: 0;
    }

    .titleDiv .subTitle {
      color: #eee;
      font-size: 16px;
      font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
      text-align: center;
    }

    #loginForm {
      padding: 20px;
      width: 400px;
      box-sizing: border-box;
      height: 300px;
      z-index: 999;
      background-color: rgba(254, 255, 255, .6);

    }
  </style>
</head>

<body>
  <div class="loginDiv">
    <div class="titleDiv">
      <div class="title">NOVA管理系统</div>
      <fieldset class="layui-elem-field layui-field-title subTitle">
        <legend>登&nbsp;录</legend>
      </fieldset>
    </div>
    <form id="loginForm" action="index.html" method="post" class="layui-form">
      <div class="layui-form-item">
        <div class="layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-username"></i>
          </div>
          <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off"
            class="layui-input" lay-reqtext="用户名不能为空">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-password"></i>
          </div>
          <input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off"
            class="layui-input" lay-reqtext="密码不能为空">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-row">
          <div class="layui-col-xs7">
            <div class="layui-input-wrap">
              <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-vercode"></i>
              </div>
              <input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码"
                autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
          </div>
          <div class="layui-col-xs5">
            <div style="margin-left: 10px;">
              <img src="https://www.oschina.net/action/user/captcha"
                onclick="this.src='https://www.oschina.net/action/user/captcha?t='+ new Date().getTime();">
            </div>
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
        <a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
      </div>
      <div class="layui-form-item">
        <button type="submit" class="layui-btn layui-btn-fluid" lay-submit lay-filter="nova-login">登录</button>
      </div>
    </form>
  </div>

  <script type="text/javascript" src="layui/layui.js"></script>
  <script>
    layui.use(['form', 'layer'], function () {
      let form = layui.form
      let layer = layui.layer
      // 提交事件
      form.on('submit(nova-login)', function (data) {
        var field = data.field; // 获取表单字段值
        // 显示填写结果，仅作演示用
        layer.alert(JSON.stringify(field), {
          title: '当前填写的字段值'
        });
        // 此处可执行 Ajax 等操作
        // …
        return false; // 阻止默认 form 跳转
      });
    })
  </script>
</body>

</html>